<template>
	<view class="backgroundbox">

		<view class="">
			<view class="header">
				<view class="datebox" @click="show = true" v-show="isdate == false">
					选择日期
				</view>
				<view class="datebox" @click="show = true" v-show="isdate == true">
					{{ date.result }}
				</view>
				<view class="gotuhg" @click="gotohegui">
					前往盒柜
				</view>
			</view>
			<u-calendar v-model="show" :mode="mode" @change="change">
				<view slot="tooltip">
					<view class="title" @click="quanbu">
						全部
					</view>
				</view>
			</u-calendar>

			<view class="zanwu" style="width: 100%;text-align: center;margin-top: 300rpx;height: 1000rpx;"
				v-if="length == 0">
				今天没有进行过开盒哦
				<view class="againbtn2" @click="gotoindex">
					去开箱
				</view>
			</view>
			<view class="dangribox" v-if="date.result && length > 0">
				<view class="drboxtext_left">
					当日开箱流水:
				</view>
				<view class="drboxtext_right">
					{{ list.total_money }}大王币
				</view>
			</view>
			<u-card :show-head="false" v-for="(item, index) in recoredList" :key="index">
				<view slot="body" class="bodyContent">
					<view class="header">
						<view class="type" v-if="item.title == '抽赏'" style="background: #FF5E1E;">
							{{ item.title }}
						</view>
						<view class="type" v-else style="background: #8300FF;">
							{{ item.title }}
						</view>
						<view class="createTime">
							开箱时间：{{ item.create_time }}
						</view>
					</view>

					<view class="main">
						<view class="name">
							{{ item.box_name }}
						</view>
						<view class="catType">
							<view class="" v-show="item.cat_id == 1">
								x{{ item.pay_mode }}倍
							</view>
							<view class="" v-show="item.cat_id == 0 && item.pay_mode == 1">
								一发入魂
							</view>
							<view class="" v-show="item.cat_id == 0 && item.pay_mode == 2">
								欧气三连
							</view>
							<view class="" v-show="item.cat_id == 0 && item.pay_mode == 3">
								豪气五连
							</view>
							<view class="" v-show="item.cat_id == 0 && item.pay_mode == 4">
								霸气十连
							</view>
						</view>
					</view>

					<view class="imgList">
						<view class="imgBox" v-for="(list, index) in item.prize_list" :key="index">
							<!-- @click="todetail(list.goods_id)" -->
							<view class="dengji_box">
								<image :src="list.prize_level_icon" mode=""></image>
							</view>
							<image class="nrimgbox" :src="list.prize_icon" mode="aspectFit"></image>
							<view class="rnbottmtext">
								<view class="rnjg">
									￥{{ list.price }}
								</view>
								<view class="rnbs">
									x{{ list.num }}
								</view>
							</view>
						</view>
					</view>
					<view class="btnBox">
						<view class="againbtn" @click="gotokaihe(item)">再来一发</view>

					</view>
				</view>
			</u-card>

		</view>

		<!-- #ifdef MP-WEIXIN -->
		<u-popup mode="center" ref="wx_pop_agagin">
			<view class="mians">
				<view class="headers">
					<view class="titles"> 温馨提示 </view>
					<view class="info">
						小程序暂不支持抽赏模式，请复制链接至浏览器下载APP后进行抽赏开箱。
					</view>
				</view>
				<view class="text">
					<view class="box" @click="copyAndroid">
						<view class="left"> 安卓端：</view>
						<view class="btn"> 点击即可复制 </view>
					</view>
					<view class="box" @click="copyIos">
						<view class=" left"> IOS端：</view>
						<view class="btn"> 点击即可复制 </view>
					</view>
					<view class="footer" @click="handleGoTo"> 如有问题可<text>“联系客服”</text>进行解决。</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			mode: 'date',
			isdate: false,
			date: {},
			list: [],
			recoredList: [],
			page: 1,
			length: null,
			adnroid: '',
			ios: "",
		}
	},
	onShow() {
		this.getlist()
	},

	onLoad(option) {
		this.getUrl()
		if (option.nowDate) {
			this.date.result = option.nowDate
			this.isdate = true
		}
	},
	onReachBottom() {
		this.page++
		if (this.page <= this.list.totalPage) {
			this.getlist()
		} else {
			uni.showToast({
				title: '已无数据',
				icon: 'none'
			});
		}

	},
	methods: {
		handleGoTo() {
			uni.navigateTo({
				url: "/orderPage/index/webkefuview"
			})
		},
		copyAndroid() {
			uni.setClipboardData({
				data: this.adnroid,
				success: res => {
					this.$u.toast(' 复制成功！')
				}
			});
		},
		copyIos() {
			uni.setClipboardData({
				data: this.ios, success: res => {
					this.$u.toast('复制成功！')
				}
			});
		},
		async getUrl() {
			const { data } = await this.$Request.get(this.$api.user.phoneType)
			this.adnroid = data.android_app_link
			this.ios = data.ios_app_link
		},
		//跳转详情
		todetail(id) {
			////console.log('e', id)
			uni.navigateTo({
				url: "/orderPage/index/mhlistDetail?goods_id=" + id
			})
		},
		gotokaihe(e) {
			uni.navigateTo({
					url: '/rollPages/index/BaishoIndex?box_type=0&ceshi=1&box_id=' + e.box_id
				})
			// if (e.title == '抽赏') {
			// 	// #ifdef MP-WEIXIN
			// 	this.$refs.wx_pop_agagin.open()
			// 	return
			// 	// #endif
				
			// } else if (e.title == '盲盒') {
			// 	uni.navigateTo({
			// 		url: '/rollPages/index/BaishoIndex?box_type=1&ceshi=1&box_id=' + e.box_id
			// 	})
			// }
		},
		gotoindex() {
			uni.switchTab({
				url: '/pages/index/redouble'
			})
		},
		change(e) {
			////console.log(e, 'e');
			this.date = e
			this.isdate = true
			this.getlist()
		},
		quanbu() {
			this.show = false
			this.date = {},
				this.isdate = false
			this.getlist()
		},
		gotohegui() {
			uni.switchTab({
				url: '/pages/index/cabinetBox'
			})
		},
		getlist() {
			let data = {
				date: this.date.result,
				page: this.page
			}
			this.$Request.post(this.$api.zengli.kaihe, data).then(res => {
				if (res.code === 0) {
					if (res.data.page !== 1) {
						this.recoredList = [...this.recoredList, ...res.data.list]
					} else {
						this.recoredList = res.data.list
					}
					this.list = res.data
					this.length = this.recoredList.length
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/.u-card {
	background-color: #262626 !important;
	background: rgba(255, 231, 192, 0.1);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	border: 2rpx solid #FED187;
}

.bodyContent {

	.btnBox {
		display: flex;
		flex-direction: row-reverse;

		.againbtn {
			width: 234rpx;
			height: 77rpx;
			border: 1rpx solid #FF9F00;
			border-radius: 39rpx;
			text-align: center;
			line-height: 77rpx;
			color: white;
			margin-top: 28rpx;


		}
	}

	.header {
		.type {
			width: 140rpx;
			background: #8300FF;
			border-radius: 0px 30px 30px 0px;
			color: white;
			text-align: center;
			line-height: 52rpx;
			// margin-left: 0;
		}

		.createTime {
			margin-left: auto;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.main {
		display: flex;
		justify-content: space-between;
		margin: 32rpx 0;

		.name {
			font-size: 26rpx;
			font-weight: bold;
			color: #fff;
		}

		.catType {
			color: #E18330;
			font-size: 30rpx;
		}
	}

	.imgList {
		display: flex;
		flex-wrap: wrap;


		.imgBox {
			width: 192rpx;
			height: 274rpx;
			// background: #FFFFFF;
			border: 2rpx solid #FED187;
			border-radius: 10px;
			margin-top: 20rpx;
			margin-right: 27rpx;
			position: relative;
			.dengji_box{
				position: absolute;
				width:80rpx;
				height: 80rpx;
				top: 8rpx;
				left:10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}

		.imgBox:nth-child(3n) {
			margin-right: 0;
		}
	}
}



.againbtn2 {
	width: 234rpx;
	height: 77rpx;
	background: #5ABAFF;
	border-radius: 39px;
	text-align: center;
	line-height: 77rpx;
	color: white;
	margin: 0 auto;
	margin-top: 55rpx;
}



.gsbox {
	// min-width: 710rpx;
	// display: flex;
	// justify-content: space-between;
	// overflow: hidden;
	// overflow-x: auto;

	padding: 34rpx;
	display: flex;
	overflow: hidden;
	overflow-x: auto;
}

.nrbox {
	width: 192rpx;
	height: 274rpx;
	background: #FFFFFF;
	border: 1rpx solid #DADADA;
	border-radius: 10px;
	margin-right: 35rpx;
}

// .nrbox:nth-child(3n){
//   margin-right: 0;
// }

.nrimgbox {
	width: 188rpx;
	height: 120rpx;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 26rpx auto 30rpx;
}

.nrboxtitle {
	font-size: 18rpx;
	width: 139rpx;
	height: 25rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 auto;
	color: #151E32;
	font-weight: 500;
}

.rnbottmtext {
	width: 139rpx;
	display: flex;
	align-items: center;
	margin: 17rpx auto 0;
}

.rnjg {
	color: #F46E13;
	font-size: 24rpx;
}

.rnbs {
	justify-content: flex-end;
	margin-left: auto;
	font-size: 18rpx;
	font-weight: 500;
	color: #979797;
}

.shangpinbox {
	position: relative;
	width: 710rpx;
	height: 583rpx;
	background: #FFFFFF;
	box-shadow: 0px 7px 24px 0px rgba(227, 224, 217, 0.25);
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 44rpx;
	padding-top: 33rpx;



	.shangpinbox_top {
		display: flex;
		align-items: center;
		margin-top: 25rpx;

		&:nth-child(1) {
			margin-top: 0;
		}

		.timebox {
			justify-content: flex-end;
			margin-left: auto;
			font-size: 24rpx;
			color: #A4A4A4;
			margin-right: 39rpx;
		}

		.leixing {
			width: 140rpx;
			background: #8300FF;
			border-radius: 0px 30px 30px 0px;
			color: white;
			text-align: center;
			line-height: 52rpx;
		}

		.mingchengbox {
			margin-left: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
		}

		.beishu {
			color: #E18330;
			font-size: 30rpx;
		}
	}

}

.dangribox {
	width: 712rpx;
	height: 146rpx;
	background: #FFFFFF;
	border: 0px solid #0BF1FF;
	border-radius: 10px;
	margin: 0 auto;
	padding: 25rpx;
	margin-top: 25rpx;
	display: flex;
	align-items: center;

	.drboxtext_left {
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		line-height: 146rpx;
	}

	.drboxtext_right {
		justify-content: flex-end;
		line-height: 146rpx;
		margin-left: auto;
		font-size: 36rpx;
		font-weight: bold;
		color: #71CFCB;
	}
}

.backgroundbox {
	width: 100vw;
	min-height: 100vh;
	background: #262626;
	padding-bottom: 44rpx;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.title {
	color: $u-type-primary;
	// text-align: center;
	padding: 20rpx 30rpx 0;
	font-size: 30rpx;
	font-weight: bold;
}

.datebox {
	width: 285rpx;
	height: 70rpx;
	background: #EBF0F9;
	border-radius: 35px;
	text-align: center;
	line-height: 70rpx;
	margin-top: 35rpx;
	margin-left: 25rpx;
}

.gotuhg {
	margin-top: 35rpx;
	margin-right: 50rpx;
	font-weight: 500;
	color: #21C8C1;
}



.wx_pop_box {
	width: 500rpx;
	padding: 0 30rpx;
	height: 300rpx;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.wx_pop_title {
		margin: 60rpx 0 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.wx_pop_text {
		color: #8D8D8D;
		font-size: 28rpx;
	}


}

.mians {
	width: 536rpx;
	height: 550rpx;
	background: #fff;
	border-radius: 10rpx;

	.headers {
		width: 536rpx;
		height: 248rpx;
		background-image: linear-gradient(rgba(79, 113, 225, 0.2), rgba(255, 255, 255, 0.2));
		border-radius: 10rpx;
		padding-top: 49rpx;

		.titles {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			text-align: center;
		}

		.info {
			width: 450rpx;
			text-align: left;
			margin: 0 auto;
			margin-top: 53rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

	}

	.text {
		.box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 31rpx;

			.left {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.btn {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				width: 226rpx;
				height: 60rpx;
				background: #485CBC;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.footer {
		margin-top: 60rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;

		text {
			color: #485CBC;
		}
	}
}
</style>
